<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户管理列表</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <script src="/bootstrap/js/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-success">
        <div class="panel-heading panel-title text-center">
            <h1>用户管理列表</h1>
            <form action="/users/allUsers" method="post">
                <div style="display: flex;">
                    <input type="text" style="width: 80px" name="username" value="${param.username}" class="form-control" placeholder="用户名..." >
                    <input type="text" style="width:150px" name="phone" value="${param.phone}" class="form-control" placeholder="📱手机号..." >
                    <button type="submit" class="btn btn-primary glyphicon glyphicon-search" >搜索</button>
                </div>
            </form>

        </div>
<%--        <form action="users/allUsers">--%>

        <div class="panel-body">
            <table>
                <tr>
                    <th>头像</th>
                    <th>用户名</th>
                    <th>电话</th>
                    <th>角色</th>
                    <th>创建时间</th>
                    <th>是否锁定</th>
                    <th>操作</th>
                    <th><button onclick="toggleCheckboxes()" style="display: block">更改班级</button></th>
                    <th><button onclick="add()" >添加</button></th>
                </tr>
                <form action="/users/bind" method="post">
                    <input type="hidden" id="selectedIds" name="selectedIds" value="" />
                    <c:forEach var="user" items="${page.list}">
                        <tr>
                            <td><img src="${user.img}" height="60" width="60" /></td>
                            <td>${user.username}</td>
                            <td>${user.phone}</td>
                            <td>${user.role==null?null:(user.role =="1")?"学生":(user.role =="2")?"教师":"管理员"}</td>
                            <td>${fn:substring(user.createTime,0,16)}</td>
                            <td>${user.lockFlag==null?null:(user.lockFlag==1?"禁用":"启用")}</td>
                            <td><button onclick="update(${user.id})">修改</button></td>
                            <td>
                                <div class="checkbox" style="display: none;">
                                <input class="checkbox-option" type="checkbox" name="option" value="${user.id}">
                                </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </td>
                        </tr>
                    </c:forEach>
                    <button type="submit" class="btn btn-primary" id="btn" style="display: none">更改到：</button>
                    <input type="number" id="banji" name="clazzId" required  style="display: none" placeholder="输入班级...">
                </form>
                <tr>
                    <td colspan="8" class="text-center">
                        <ul class="pagination ">
                            <c:if test="${page.totalCount>0}">
                                总${page.totalCount}条  每页${page.pageLimit}条
                                <%-- <c:forEach begin="1" step="1" end="${page.totalPage}" var="p">
                                     <li><a href="javascript:gotoPage(${p})">${p}</a></li>
                                 </c:forEach>--%>
                                <a href="${pageContext.request.contextPath}/${page.url}?currtPage=${page.currtPage-1}${page.params}">上一页</a>  <a href="${pageContext.request.contextPath}/${page.url}?currtPage=${page.currtPage+1}${page.params}">下一页</a>
                            </c:if>
                            <c:if test="${page.totalCount<=0}">
                                对不起，暂无数据
                            </c:if>

                        </ul>
                    </td>
                </tr>
            </table>
        </div>
<%--        </form>--%>
        <div class="panel-footer text-right">
            百度在线考试平台
        </div>
    </div>
</div>
</body>
<script>
    // 获取所有复选框元素
    var checkboxes = document.getElementsByClassName("checkbox-option");

    // 监听复选框点击事件
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].addEventListener("click", function() {
            updateSelectedIds();
        });
    }

    // 更新隐藏域的值
    function updateSelectedIds() {
        var selectedIds = [];
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                selectedIds.push(checkboxes[i].value);
            }
        }
        document.getElementById("selectedIds").value = selectedIds.join(",");
    }

    function toggleCheckboxes() {
        var element1 = document.getElementById("btn");
        var element2 = document.getElementById("banji");
        if (element1.style.display === "block" && element2.style.display === "block"){
            element1.style.display = "none";
            element2.style.display = "none";
        } else {
            element1.style.display = "block";
            element2.style.display = "block";
        }

        var checkboxes = document.getElementsByClassName("checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
            var checkbox = checkboxes[i];
            checkbox.style.display = checkbox.style.display === "none" ? "block" : "none";
        }
    }

    function add(){
        location.href="/users/addUser";
    }
    function update(id){
        location.href="/users/updateUser/"+id;
    }
</script>
</html>
